<ion-header class="nav-header">
  <ion-toolbar>
    <img src="assets/icon/logo.png" style="height: 40px; width: 116px; position: absolute; top: 2px; left: 50%; margin-left: -58px;"/>
    <ion-buttons slot="end">
      <ion-button (click)="hideSlider()">
        <ion-icon class="iconfont  ion-ios-fanhui1-down slide-h-btn" style="font-size: 16px; color: #fff;"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-header>
  <ion-slides class="slide-contain" options="slideOpts" #slides pager="true" (ionSlideTouchEnd)="autoPlay()">
    <ion-slide *ngFor="let item of imgArr">
      <div><img src="{{item.img}}" /></div>
    </ion-slide>
  </ion-slides>
  <ion-item (click)="toNoticeList();$event.stopPropagation" lines="none"
    style="height: 20px; --background: #70737a;background: #70737a; margin-top: -5px;" id="noticeItem">
    <ion-icon class="iconfont  ion-ios-laba"  style="font-size: 20px;margin-top: -27px; color: #fff; font-weight: bold;"></ion-icon>
    <ion-label class="notice-contain" id="notice-contain">
      <div id="n-c-contain">
        <div id="n-c">
          <p style=" color:#fff;font-size: 12px; font-weight: bold;" *ngFor="let item of noticeArr"><span
              [innerHTML]="item.content | html"></span>&nbsp;&nbsp;</p>
        </div>
        <div id="n-c-copy"></div>
      </div>
    </ion-label>
  </ion-item>
  <div style="background: #fff;">
    <ion-grid class="menu-c-third">
      <ion-row>
        <ion-col (click)="thirdMenu(0)" [ngClass]="{'lot-enter':thirdStatus==0}">
          <div class="menu-c-third-item">
            <div>
              <img [src]="thirdStatus==0?'assets/icon/index_tab1_active.png':'assets/icon/index_tab1_default.png'"
                style="width: 60px; height: 60px;" />
            </div>
          </div>
        </ion-col>
        <ion-col (click)="thirdMenu(3)" [ngClass]="{'real-enter':thirdStatus==3}">
          <div class="menu-c-third-item">
            <div>
              <img [src]="thirdStatus==3?'assets/icon/index_tab2_active.png':'assets/icon/index_tab2_default.png'"
                style="width: 60px; height: 60px;" />
            </div>
          </div>
        </ion-col>
        <ion-col (click)="thirdMenu(1)" [ngClass]="{'real-enter':thirdStatus==1}">
          <div class="menu-c-third-item">
            <div>
              <img [src]="thirdStatus==1?'assets/icon/index_tab3_active.png':'assets/icon/index_tab3_default.png'"
                style="width: 60px; height: 60px;" />
            </div>
          </div>
        </ion-col>
        <ion-col (click)="thirdMenu(4)" [ngClass]="{'chess-enter':thirdStatus==4}">
          <div class="menu-c-third-item">
            <div>
              <img [src]="thirdStatus==4?'assets/icon/index_tab5_active.png':'assets/icon/index_tab5_default.png'"
                style="width: 60px; height: 60px;" />
            </div>
          </div>
        </ion-col>
        <ion-col (click)="thirdMenu(2)" [ngClass]="{'chess-enter':thirdStatus==2}">
          <div class="menu-c-third-item">
            <div>
              <img [src]="thirdStatus==2?'assets/icon/index_tab4_active.png':'assets/icon/index_tab4_default.png'"
                style="width: 60px; height: 60px;" />
            </div>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div *ngIf="thirdStatus==3">
    <ion-grid class="home-menu-grid menu-tab menu-qie">
      <ion-row>
        <ion-col size="4" [ngClass]='{"third":isPSSport}' (click)="onSportType(3)">
          <span *ngIf="!isPSSport">平博体育</span>
          <img *ngIf="isPSSport" src="assets/img/index_page_tab_11.png"  />
        </ion-col>
        <ion-col size="4" [ngClass]='{"first":isAGSport}' (click)="onSportType(1)">
          <span *ngIf="!isAGSport">AG体育</span>
          <img *ngIf="isAGSport" src="assets/img/index_page_tab_1.png"  />
        </ion-col>
        <ion-col size="4" [ngClass]='{"second":isSBOSport}' (click)="onSportType(2)">
          <span *ngIf="!isSBOSport">利己SBO</span>
          <img *ngIf="isSBOSport" src="assets/img/index_page_tab_4.png"  />
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div *ngIf="thirdStatus==2">
    <ion-grid class="home-menu-grid menu-tab menu-qie">
      <ion-row>
        <ion-col size="6" [ngClass]='{"first": isEleGame}' (click)="onElecGameType(1)">
          <span *ngIf="!isEleGame">AG电子</span>
          <img *ngIf="isEleGame" src="assets/img/index_page_tab_2.png"  />
        </ion-col>
        <ion-col size="6" [ngClass]='{"second": isEleGameTwo}' (click)="onElecGameType(2)">
          <span *ngIf="!isEleGameTwo">AG街机</span>
          <img *ngIf="isEleGameTwo" src="assets/img/index_page_tab_3.png"  />
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div *ngIf="thirdStatus==4">
    <ion-grid class="home-menu-grid menu-tab menu-qie">
      <ion-row>
        <ion-col size="6" [ngClass]='{"first": isChessGame}' (click)="onChessGameType(1)">
          <span *ngIf="!isChessGame">开元棋牌</span>
          <img *ngIf="isChessGame" src="assets/img/index_page_tab_8.png"  />
        </ion-col>
        <ion-col size="6" [ngClass]='{"second": isChessGameTwo}' (click)="onChessGameType(2)">
          <span *ngIf="!isChessGameTwo">双赢棋牌</span>
          <img *ngIf="isChessGameTwo" src="assets/img/index_page_tab_10.png"  />
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <ion-grid class="home-menu-grid menu-tab menu-qie" *ngIf="thirdStatus==0">
    <ion-row>
      <ion-col [ngClass]='{"second": secodFlag}' (click)="onSelectMenu(2)">
        <span *ngIf="!secodFlag">万漉彩票</span>
        <img *ngIf="secodFlag" src="assets/img/index_page_tab_5.png"  />
      </ion-col>
      <ion-col [ngClass]='{"first": firstFlag}' (click)="onSelectMenu(1)">
        <span *ngIf="!firstFlag">双赢彩票</span>
        <img *ngIf="firstFlag" src="assets/img/index_page_tab_9.png"  />
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-header>
<ion-content style="--background: #f1f2f6;">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <!-- 真人游戏 -->
  <div *ngIf="thirdStatus==1">
    <div *ngFor="let item of entertainment"  (click)="goEntertainmentUrl(item.platformId,item.canDemo,item.platform_name)"  style="margin: 6px auto; padding:0px 10px ; text-align: center;">
      <!-- 640*x -->
      <img src="{{item.cover}}" />
    </div>
  </div>
  <!-- 体育竞技 -->
  <ion-list *ngIf="thirdStatus==3" style="background: transparent; margin-bottom: 10px;">
    <div *ngIf="isAGSport" style="margin-top: 10px;">
      <ion-item *ngFor="let item of sportList" style="--background: transparent;" lines="none"
        (click)="goSportsEventsUrl(item.platformId,item.canDemo,item.platform_name)">
        <img src="{{item.cover}}"
          style="padding-bottom: 10px; margin: 0 auto;" />
      </ion-item>
    </div>
    <div *ngIf="isSBOSport">
      <ion-item *ngFor="let item of sprotBookList; let i=index" [ngClass]="{'sbo_item':i!=0}" style="--background: transparent;"  lines="none" (click)="goSportBooksUrl(item.canDemo)">
        <img src="{{item.cover}}"
          style="margin: 0 auto;" />
      </ion-item>
    </div>
    <div *ngIf="isPSSport">
      <ion-item *ngFor="let item of psList; let i=index" [ngClass]="{'sbo_item':i!=0}" style="--background: transparent;"  lines="none" (click)="goPSEventsUrl(item.platform_name)">  
        <img src="{{item.cover}}"
          style="margin: 0 auto;" />
      </ion-item>
    </div>
  </ion-list>
  <!-- AG街机 -->
  <div *ngIf="thirdStatus==2">
    <!-- 640*300的图片大小 -->
    <div style="margin: 6px auto -2px; padding:0px 10px ; text-align: center;" *ngFor="let item of electronicGameSp"
      (click)="goElectronicGameUrl(item.platform_id,item.ng_game_code,item.canDemo,item.platform_name)"><img
        src="{{item.image}}" />
    </div>
    <ion-grid>
      <ion-row>
        <ion-col size="3" *ngFor="let item of electronicGame" class="third-game-item"
          (click)="goElectronicGameUrl(item.platform_id,item.ng_game_code,item.canDemo,item.platform_name)">
          <div style="height: 80px;"> <img src="{{item.image}}" style="width: 80px; height: auto;"></div>
          <div> {{item.name}}</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <!-- 开元棋牌/双赢棋牌 -->
  <div *ngIf="thirdStatus==4" style="margin-top: 6px;">
    <!-- 640*300的图片大小 -->
    <div *ngIf="isChessGame">
      <div style="margin: -2px auto; padding:0px 10px ; text-align: center;" 
        (click)="goKYGameUrl(0)"><img
          src="{{serverPath}}skin/dsn/newicoimg/ky_game.png" />
      </div>
      <ion-grid>
        <ion-row>
          <ion-col size="3" *ngFor="let item of KYData" class="third-game-ky-item"
            (click)="goKYGameUrl(item.canDemo,item.kindId)">
            <div class="ky-img-contain"> <img src="{{item.imageUrl}}" style="width: 70px; height: auto;"></div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div *ngIf="isChessGameTwo">
      <div style="margin: -2px auto; padding:0px 10px ; text-align: center;" 
        (click)="goSWGameUrl(0)"><img
          src="{{serverPath}}skin/dsn/newicoimg/sw_game.png" />
      </div>
      <ion-grid>
        <ion-row>
          <ion-col size="3" *ngFor="let item of SWData" class="third-game-ky-item"
            (click)="goSWGameUrl(item.canDemo,item.gameId)">
            <div class="ky-img-contain"> <img src="{{item.imageUrl}}" style="width: 70px; height: auto;"></div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
  <!-- 彩票游戏 -->
  <ion-grid class="home-menu-grid menu-detail" *ngIf="thirdStatus==0">
    <div  style="margin: 6px auto 0px; padding:0px 10px ; text-align: center;  width: 100%;" 
        [ngClass]='{"secodSort":secodFlag,"hidden":!secodFlag}' (click)="toLotdetail('pk8','极速赛车','')">
        <img src="{{lotsImg}}" *ngIf="!(lotsImg | empty)"/>
      </div>
    <ion-row>
      <!-- 所有彩种 -->
      <ion-col class="all-hots-col" *ngFor="let item of lots1; let i=index"
        (click)="toLotdetail(item.key,item.name,item.lotteryId)" size="6"
        [ngClass]='{"secodSort":secodFlag,"hidden":!secodFlag,"border-right":(i % 2)==1?false:true,"border-left":(i % 2)!=1?false:true}'>
        <div class="ion-c-contain all-hots">
          <ion-avatar class="ion-float-left lotter-img">
            <img src="{{url}}{{item.img}}">
          </ion-avatar>
          <div class="ion-float-left menu-text">
            <p class="m-t-name">{{item.name}}</p>
            <p class="m-t-time" *ngIf="item.closeTime" [attr.data-code]="item.key" style="color: #0070c0;"
              data-value="1" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
            <p class="m-t-time" *ngIf="!item.closeTime" [attr.data-code]="item.key" style="color: #d31111;"
              data-value="0" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
          </div>
          <p class="ion-float-right ion-store" (click)="onStoreFun(item.lotteryId,item.is_follow)">
            <ion-icon class="iconfont ion-ios-shoucang" style=" padding-bottom: 4px;"
              [ngStyle]="{'color':item.is_follow==1 ? '#fd2e27':'#c0c0c0' }"></ion-icon>
          </p>
        </div>
      </ion-col>
      <!-- 双赢彩票 -->
      <div style="margin: 6px auto 0px; padding:0px 10px ; text-align: center;  width: 100%;" 
        (click)="goSYLotter()" [ngClass]='{"firstSort":firstFlag,"hidden":!firstFlag}'>
        <img  src="{{sgBanner}}" *ngIf="!(sgBanner | empty)"/> 
      </div>
      <ion-col size="3" class="sy_lot" *ngFor="let item of sgList" (click)="goSYLotter(item.lotCode)" [ngClass]='{"firstSort":firstFlag,"hidden":!firstFlag}'>
        <img src="{{item.imageUrl}}">
      </ion-col>  
    </ion-row>
  </ion-grid>
  <!-- 首页悬浮的下载app的地方 -->
  <!-- <div class="download-contain" *ngIf="isNoDevice">
      <div class="img" (click)="openDownPage();$event.stopPropagation"><img src="assets/img/index_down_bg.png" width="100px" /></div>
      <div class="close"><i class="iconfont ion-ios-shanchu" (click)="closeContain();$event.stopPropagation"></i></div>
  </div> -->
</ion-content>